<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/overview/src/overview.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/overview/src/overview.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
&lt;xdh-map-placement :placement="placement" v-bind="$attrs" >
  &lt;div ref="warp" :class="{'xdh-map-overview': true, 'close': close}" >
    &lt;div :class="{'xdh-map-overview__map': true}" :style="mapWarpSize">
      &lt;xdh-map ref="overviewMap" class="overview-map" v-bind="overviewProp" v-if="overviewInit" @ready="overviewReady" @on-dragUp="overviewDragUpHandle">
         &lt;xdh-map-rectangle v-if="rectangleProp" v-bind="rectangleProp" >&lt;/xdh-map-rectangle>
      &lt;/xdh-map>
    &lt;/div>
    
    &lt;div :class="[{'xdh-map-overview__trigger': true}, placement, `is-${this.theme}`]" @click="close = !close">
      &lt;i class="iconfont" :class="iconClass">&lt;/i>
    &lt;/div>
  &lt;/div>
&lt;/xdh-map-placement>
&lt;/template>

&lt;script>
  /**
   * 鹰眼控件
   * @module xdh-map-overview
   */
 
  import XdhMapPlacement from '../../placement'
  import XdhMapRectangle from '../../rectangle'
  import XdhMap from '../../map'
  import {getParent, mapReady} from 'utils/util'
  import {getWidth, getHeight, getTopLeft} from 'ol/extent'
  import {DragClass as Drag} from 'packages/index'
  import {addResizeListener, removeResizeListener} from 'utils/resize-event' 
  const ZoomGap = 4 // .5
  /**
   * 参数属性
   * @member props
   * @property {string} [placement] 停泊位置，可选值'left-top', 'right-top', 'left-bottom', 'right-bottom'
   * @property {string} [theme] 主题 可选值 'default', 'light', 'dark'
   * @property {object} [boxStyle] 选择框样式
   * @property {number} [boxStyle.strokeWidth] 边框厚度
   * @property {string} [boxStyle.strokeColor] 边框颜色
   * @property {string} [boxStyle.strokeLineCap] 虚线样式
   * @property {string} [boxStyle.strokeLineJoin] 虚线样式
   * @property {number} [boxStyle.strokeLineDash] 虚线样式
   * @property {number} [boxStyle.strokeLineDashOffset]
   * @property {number} [boxStyle.strokeMiterLimit]
   */
   

  export default {
    name: 'XdhMapOverview',
    components: {
      XdhMapPlacement,
      XdhMap,
      XdhMapRectangle
    },
    props: {
      placement: {
        type: String,
        default: 'left-bottom',
        validator(val) {
          return [
            'left-top', 'right-top', 'left-bottom', 'right-bottom'
          ].includes(val)
        }
      },
      boxStyle: {
        type: Object,
        default: () => {
          return {
            strokeWidth: 3, // 边框厚度
            strokeColor: 'green', // 边框颜色
            strokeLineCap: '', // 虚线样式
            strokeLineJoin: '', // 虚线样式
            strokeLineDash: [], // 虚线样式
            strokeLineDashOffset: 0,
            strokeMiterLimit: 0
          }
        }
        
      },
      theme: {
        type: String,
        default: 'light',
        validator() {
          return ['dark', 'light']
        }
      }
    },
    data() {
      return {
        close: false,
        mapWarpSize: {
          width: '100%',
          height: '100%'
        },
        parent: null,
        parentView: null,
        map: null,
        parentTimer: null,
        parentExtent: null,

        overviewMap: null,
        overviewView: null,
        overviewProp: {},
        overviewInit: false,
        overviewTimer: null
      }
    },
    computed: {
      btnClass() {
        return ['xdh-map-overview__triggr', this.placement]
      }, 
      iconClass() {
        if (this.placement.includes('bottom')) {
          return this.close ? 'icon-up' : 'icon-down'
        }
        return this.close ? 'icon-left' : 'icon-right'
      },
      rectangleProp() {
        if (!this.parentExtent) {
          return null
        } else {
          let width = getWidth(this.parentExtent)
          let height = getHeight(this.parentExtent)
          let position = getTopLeft(this.parentExtent) 
          return {
            width: width,
            height: height,
            position: position,
            fill: 'transparent',
            ...this.boxStyle
            // strokeWidth: 2,
            // strokeColor: 'green'
          }
        }
      }
    },
    methods: {
      ready(map) {
        this.map = map 
        this.parentView = this.map.getView()
        this.parentExtent = this.parentView.calculateExtent() 

        this.parentView.on('change', this.parentViewChange)
        addResizeListener(this.parent.$el, this.listenParentSize)
        this.initOverview()
      },
      parentViewChange(e) {
        if (this.parentTimer) {
          window.clearTimeout(this.parentTimer)
          this.parentTimer = null
        }
        this.parentTimer = window.setTimeout(() => {
          let newCenter = e.target.getCenter()
          let newZoom = e.target.getZoom() 
          
          this.overviewView.setCenter(newCenter)
          this.overviewView.setZoom(Math.max(newZoom - ZoomGap, 1)) 
          this.overviewView.setMaxZoom(Math.max(newZoom - ZoomGap, 1)) 
          this.overviewView.setMinZoom(Math.max(newZoom - ZoomGap, 1)) 
          
          this.parentExtent = e.target.calculateExtent()
          
        }, 500)
      },
      listenParentSize() {
        this.parentExtent = this.parentView.calculateExtent()  
      },
      initOverview() {
        let zoom = Math.max(this.parent.zoom - ZoomGap, 1)
        let prop = {
          coordType: this.parent.coordType, 
          type: this.parent.type,
          layerConfig: this.parent.layConfig,
          zoom: zoom,
          maxZoom: zoom,
          minZoom: zoom
        } 
        this.overviewProp = prop
        this.overviewInit = true
      },
      overviewReady(map, overview) {
        this.overviewMap = map
        this.overviewView = map.getView()
        let inters = map.getInteractions()
        
        inters.getArray().forEach((inter) => { 
          this.overviewMap.removeInteraction(inter)
        })  
        let dragInteraction = new Drag(overview, {
          featureDefine: (feature) => {
            return feature 
          }
        })  
        this.overviewMap.addInteraction(dragInteraction) 
         
      },
      overviewDragUpHandle(feature, e) {
        let center = feature.getGeometry().getInteriorPoint().getCoordinates()
        this.parentView.setCenter([center[0], center[1]])
      },
      setOverViewWarpSize() {
        this.close = false
        this.mapWarpSize.width = this.$refs.warp.offsetWidth + 'px'
        this.mapWarpSize.height = this.$refs.warp.offsetHeight + 'px'
        this.close = true 
      }
    },
    created() {
      // 获取地图组件实例
      this.parent = getParent.call(this)
      mapReady.call(this, this.ready)
    },
    mounted() {
      this.setOverViewWarpSize()
    },
    beforeDestroy() {
      removeResizeListener(this.parent.$el, this.listenParentSize)
      this.parentView.un('change', this.parentViewChange)
      if (this.parentTimer) {
        window.clearTimeout(this.parentTimer)
        this.parentTimer = null
      }
    }
  }
&lt;/script>

</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
